<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		getYinBiaoListApi
	} from '/api/request.js';
	import {
		onUnload,
		onHide,
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const props = defineProps({});
	const query = ref({
		pa_id: '',
		page: 1,
		la: true,
		trigger: false,
		pageSize: 20,
		title: ''
	});
	const list = ref(null);
	const getList = async (type = true) => {
		uni.showLoading({
			mask: true
		});
		let res = await getYinBiaoListApi(query.value);
		uni.hideLoading();
		console.log(res);
		if (!type || !list.value) {
			list.value = [];
		}
		res.data.list.map((item) => {
			list.value.push(item);
		});
		query.value.total = res.data.count;
		if (query.value.page * 20 >= query.value.total) {
			query.value.la = false;
		} else {
			query.value.la = true;
		}
	};
	onLoad((e) => {
		query.value.pa_id = e.id;
		query.value.title = e.title;
	});
	onShow(() => {
		platform.value = uni.getStorageSync('platform');
		getList(false);
	});
	const platform = ref({});
	const goback = () => {
		uni.navigateBack();
	};
	const show = ref(true);
	setTimeout(() => {
		show.value = false;
	}, 2000);

	onHide(() => {
		uni.$emit('pause');
	});
	onUnload(() => {
		uni.$emit('pause');
	});
	const noSelectList = ref(new Set());
	const selectList = ref(new Set());
	const statusList = ref({});
	const changeSelectList = (id, type) => {
		const targetList = type === 1 ? noSelectList : selectList;
		const otherList = type === 1 ? selectList : noSelectList;
		if (targetList.value.has(id)) {
			targetList.value.delete(id);
		} else {
			targetList.value.add(id);
			otherList.value.delete(id);
		}
	};
	const getSelectId = (id) => selectList.value.has(id);
	const getNoSelectId = (id) => noSelectList.value.has(id);
	const playAudio = (id, url) => {
		uni.$emit('playAudio', url);
		if (statusList.value.id !== id) {
			statusList.value = {
				id,
				status: 1
			};
		} else {
			statusList.value.status = (statusList.value.status % 4) + 1;
		}
	};
	const returnStatus = (id) => {
		const index = statusList.value.id == id;
		if (index) {
			return 'active'
		} else {
			return '';
		}
	};

	const submit = () => {
		// if (noSelectList.value.length < 1 || noSelectList.value.length % 5 != 0) {
		// 	uni.showToast({
		// 		title: '不会的单标只能是5的倍数',
		// 		icon: 'none'
		// 	});
		// 	return;
		// }
		if (noSelectList.value.size < 1) {
			uni.showToast({
				title: '请选择要学习的音标',
				icon: 'none'
			});
			return;
		}
		const hui = Array.from(selectList.value).join(',');
		const buhui = Array.from(noSelectList.value).join(',');
		uni.redirectTo({
			url: `/pages/phoneticTranscription/components/readYinBiao?hui=${hui}&buhui=${buhui}&id=${query.value.pa_id}&title=${query.value.title}`
		})
	};
	const handlePullDownRefresh = () => {
		if (query.value.la) {
			uni.showLoading({});
			query.value.page += 1;
			getList(true).finally(() => {
				uni.hideLoading();
			});
		}
	};
	const handleReachBottom = () => {
		query.value.trigger = true;
		query.value.page = 1;
		getList(false).finally(() => {
			query.value.trigger = false;
		});
	};

	const center = ref(null);
	const demoVideo = ref(null);
	const videoUrl = ref('')
	const showVideo = (e) => {
		center.value = true;
		demoVideo.value = uni.createVideoContext("demoVideo");
		videoUrl.value = e
		status.value = 2;
	};
	const timer = ref(null);
	const status = ref(2);
	const dianji = () => {
		if (status.value == 2) {
			status.value = 3;
			timer.value = setTimeout(() => {
				status.value = 2;
				clearTimeout(timer.value);
				timer.value = null;
			}, 1500);
		}
	};
	const plays = () => {
		if (timer.value) {
			clearTimeout(timer.value);
			timer.value = null;
		}
		demoVideo.value.play();
		status.value = 3;
		timer.value = setTimeout(() => {
			status.value = 2;
			clearTimeout(timer.value);
			timer.value = null;
		}, 1500);
	};
	const playTuo = () => {
		try {
			if (timer.value) {
				clearTimeout(timer.value);
				timer.value = null;
			}
			status.value = 1;
			demoVideo.value.pause();
		} catch (e) {
			console.log(e);
		}
	};
	const guanbi = () => {
		demoVideo.value.pause();
		demoVideo.value = null;
		center.value = false;
	};
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> {{query.title}} </view>
			<image class="left" style="opacity: 0" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<view class="select-wrap uni-row">
			<view class="left">
				<view class="title"> 训练统计 </view>
				<view class="label"> 正确：{{ selectList.size }} 词 </view>
			</view>
			<view class="right">
				<view class="title"> 训练统计 </view>

				<view class="label"> 错误：{{ noSelectList.size }} 词 </view>
			</view>
		</view>
		<scroll-view @scrolltolower="handlePullDownRefresh" refresher-enabled="true"
			:refresher-triggered="query.trigger" @refresherrefresh="handleReachBottom" scroll-y="true" class="body"
			:style="{
                height: platform.gaodu - platform.dingbu - 96  - 186 - 196 + 'rpx'
            }">
			<view class="item uni-row" v-for="(item, index) in list" :key="item"
				@click="playAudio(item.id,item.phonetic_audio_en)" :class="returnStatus(item.id)">
				<view class="left uni-row">
					<view class="text yinbiao">
						{{ item.name }}
					</view>
					<image v-if="query.title!='组合字母'" @click.stop="showVideo(item.phonetic_video_en)"
						src="/static/img/yinbiao/video.png" class="icon"></image>
				</view>
				<view class="right uni-row">
					<view class="items uni-row" v-for="(i, iIndex) in ['会', '不会']" :key="iIndex"
						@click.stop="changeSelectList(item.id, iIndex)" :class="
                            iIndex == 0 && getSelectId(item.id)
                                ? 'default'
                                : iIndex == 1 && getNoSelectId(item.id)
                                ? 'active'
                                : ''
                        ">
						<image :src="
                                iIndex == 0
                                    ? '/static/img/wolrd/default-dui.png'
                                    : '/static/img/wolrd/default-cuo.png'
                            " class="icon s"></image>
						<image :src="
                                iIndex == 0
                                    ? '/static/img/wolrd/dui.png'
                                    : '/static/img/wolrd/cuo.png'
                            " class="icon ss">
						</image>
						{{i}}
					</view>
				</view>
			</view>
			<view style="height: 4rpx"> </view>
		</scroll-view>
		<view style="height: 39rpx"> </view>
		<view class="btn uni-row" @click="submit"> 开始训练 </view>
		<view style="height: 39rpx"> </view>
	</view>
	<view class="tishi uni-row" v-if="show">
		<image src="/static/img/wolrd/gantanhao.png" mode="widthFix" class="gantan"></image>
		<view class="label"> 达不到音标秒认的不要选择会，慎重选择 </view>
	</view>
	<view class="waimiande uni-row" v-if="center" @click="guanbi">
		<view class="wais uni-row">
			<video :src="videoUrl" :enable-play-gesture="false" class="video" :autoplay="true" id="demoVideo"
				:show-center-play-btn="false" :controls="false" object-fit="contain">
				<cover-view class="tupian-wai" @click="dianji">
					<cover-image @click="plays" :style="{ top: status == 1 ? '50%' : '-20%' }" class="controls-play img"
						src="/static/img/play.png"></cover-image>
					<cover-image @click="playTuo" :style="{ top: status == 3 ? '50%' : '-20%' }"
						class="controls-pause img" src="/static/img/zanting.png"></cover-image>
				</cover-view>
			</video>
		</view>
	</view>
</template>
<style scoped lang="less">
	.waimiande {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 555;
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		transition: 0.2s all;

		.wais {
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 555;
			transform: translate(-50%, -50%);
			padding: 40rpx 0rpx;
			border-radius: 30rpx;
			overflow: hidden;
			justify-content: center;
			background-color: #000;

			.video {
				width: 664rpx;
				// height: 280rpx;
			}

			.tupian-wai {
				width: 664rpx;
				height: 100%;
			}

			.controls-play,
			.controls-pause {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				&.img {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}

	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.shuoming {
			justify-content: center;
			height: 48rpx;
			background: #ffeeee;
			font-size: 20rpx;
			color: #ef4828;
		}

		.select-wrap {
			padding: 24rpx 28rpx 18rpx;
			height: 216rpx;

			.left,
			.right {
				flex: 1;
				height: 174rpx;
				padding: 36rpx 28rpx 0 30rpx;

				.title {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

				.label {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}

			.left {
				background: url('/static/img/wolrd/left.png');
				background-size: 100% 100%;

				.label {
					color: #6489fa;
				}
			}

			.right {
				padding-left: 48rpx;
				background: url('/static/img/wolrd/right.png');
				background-size: 100% 100%;

				.label {
					color: #ef4828;
				}
			}
		}

		.body {
			padding-left: 28rpx;
			padding-right: 28rpx;

			.item {
				justify-content: space-between;
				height: 84rpx;
				background: #ffffff;
				border-radius: 8rpx;
				padding: 0 28rpx;
				margin-bottom: 16rpx;

				.left {
					font-size: 36rpx;
					color: #333333;

					.text {
						width: 60rpx;
					}

					.icon {
						width: 48rpx;
						height: 48rpx;
					}
				}



				.right {
					.items {
						justify-content: center;
						margin-left: 20rpx;
						// width: 96rpx;
						height: 48rpx;
						// background: #F7F7F7;
						// border-radius: 8rpx;
						font-size: 24rpx;
						color: #999999;


						.icon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							margin-left: 10rpx;
						}

						.ss {
							display: none;
						}

						&.active {
							.s {
								display: none;
							}

							.ss {
								display: block;
							}
						}

						&.default {
							.ss {
								display: block;
							}

							.s {
								display: none;
							}
						}
					}
				}

				&.active {
					.left {
						font-weight: 600;
						font-size: 38rpx;
					}

					.fanyi {
						opacity: 0;
					}
				}
			}
		}

		.btn {
			justify-content: center;
			font-size: 32rpx;
			color: #ffffff;
			margin: 0 auto;
			width: 610rpx;
			height: 88rpx;
			background: #9561f3;
			border-radius: 16rpx;
		}
	}

	.tishi {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%);
		z-index: 3;
		justify-content: center;
		transition: 1s all;
		width: 590rpx;
		height: 66rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 74rpx;

		.gantan {
			width: 40rpx;
			margin-right: 8rpx;
		}

		.label {
			font-size: 24rpx;
			color: #ffffff;
		}
	}
</style>